<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>字符串形式的ref</title>
	</head>
	<body>
		<div id="test"></div>
		<!-- 引入核心库 -->
		<script src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script src="../js/babel.min.js"></script>

		<script type="text/babel">
			// 创建组件
			class Demo extends React.Component {
				showLeftData = () => {
					const { input1 } = this.refs;
					alert(input1.value);
				};
				showRightData = () => {
					const { input2 } = this.refs;
					alert(input2.value);
				};
				render() {
					return (
						<div>
							<input ref="input1" type="text" placeholder="点击按钮提示数据" />
							&nbsp;
							<button onClick={this.showLeftData}>点我提示左侧输入信息</button>&nbsp;
							<input ref="input2" onBlur={this.showRightData} type="text" placeholder="失去焦点提示数据" />
						</div>
					);
				}
			}
			// 渲染组件到页面
			ReactDOM.render(<Demo />, document.getElementById("test"));
		</script>
	</body>
</html>
